<template>
  <div class="containsClass">
    <div class="bodyClass">
      <div>
        <div class="titleClass">{{ title }}</div>
        <div class="boxClass">
          <div class="tableTitClass">
            <div style="flex: 2" class="numberClass">学号</div>
            <div style="flex: 2" class="nameClass">姓名</div>
            <div style="flex: 2" class="numberClass">状态</div>
          </div>
          <div class="dataBoxClass" id="dataBox">
            <div class="noInfo" v-if="childList.length === 0">暂无数据</div>
            <div v-for="(item, key) in childList" :key="key" class="itemClass">
              <div style="color: #6489b6; flex: 2" class="numberClass">
                {{ item.employeeNo }}
              </div>
              <div
                style="font-weight: bold; color: #595e61; flex: 2"
                class="nameClass"
              >
                {{ item.nickName }}
              </div>
              <div
                style="flex: 2"
                :style="{ color: getStatus(item.currentStatus).color }"
              >
                {{ getStatus(item.currentStatus).text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      childList: "getChildList",
    }),
  },
  watch: {
    childList(v) {
      console.log(v,'childList978971000')
      if (v) {
        var container = document.getElementById("dataBox");
        var items = container.getElementsByClassName("itemClass");
        if (this.currentIndex >= 0 && this.currentIndex < items.length) {
          var item = items[this.currentIndex];
          container.scrollTop = item.offsetTop - container.offsetTop;
        }
      }
    },
  },
  data() {
    return {
      dataList: [],
      classData: JSON.parse(sessionStorage.getItem("classData")),
      currentIndex: JSON.parse(sessionStorage.getItem("currentIndex")),
      title: "",
    };
  },
  mounted() {},
  created() {
    this.title = JSON.parse(sessionStorage.getItem("classData")).className;
    console.log(this.title, "this.title");
    let index = Number(sessionStorage.getItem("currentIndex"));
    this.childList[index].currentStatus = 1;
  },
  methods: {
    getStatus(status) {
      //1正在测试 2请准备 3等待 4不测试 5已测试
      let list = [
        {
          status: 1,
          text: "测试中",
          color: "#35BE4B",
        },
        {
          status: 2,
          text: "请准备",
          color: "#fb8a4a",
        },
        {
          status: 3,
          text: "等待中",
          color: "#7293bc",
        },
        {
          status: 4,
          text: "不测试",
          color: "#f98b95",
        },
        {
          status: 5,
          text: "已测试",
          color: "#d90013",
        },
        {
          status: 6,
          text: "已跳过",
          color: "#f98b95",
        },
      ];
      return list.find((i) => i.status == status);
    },
  },
};
</script>

<style lang="less" scoped>
.containsClass {
  width: 35vw;
  height: 100%;
  .bodyClass {
    width: 100%;
    height: 100%;
    background-size: cover; /* 图片覆盖整个容器 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 图片居中显示 */
    background-image: url("~@/assets/images/beijin_b.png");
    margin: 0 auto;
    padding: 0.12rem 0;
    text-align: center;
    font-weight: bold;
    position: relative;
    & > div {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      .titleClass {
        font-size: 0.18rem;
        color: #fff;
        margin-bottom: 0.1rem;
        height: 0.28rem;
        line-height: 0.28rem;
        white-space: nowrap;
        /* 确保文本在一行内显示 */
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        text-overflow: ellipsis;
      }
      .boxClass {
        height: calc(100% - 0.15rem - 0.28rem);
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0.06rem;
        .tableTitClass {
          height: 0.2rem;
          line-height: 0.2rem;
          display: flex;
          padding: 0 0.05rem;

          div {
            padding: 0.05rem 0;
            flex: 3;
            font-size: 0.12rem;
            color: #adabab;
          }
          .numberClass {
            border-right: 0.01rem solid rgba(173, 171, 171, 0.2);
          }
          .nameClass {
            border-right: 0.01rem solid rgba(173, 171, 171, 0.2);
          }
          .borClass {
            border-right: 0.01rem solid rgba(173, 171, 171, 0.2);
          }
        }
        .dataBoxClass {
          height: calc(100% - 0.2rem);
          overflow-y: auto;
          .noInfo {
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: center;
            font-size: 0.16rem;
            color: #adabab;
          }
          & > div {
            display: flex;
            padding: 0.05rem;
            div {
              padding: 0.05rem 0.02rem;
              font-size: 0.125rem;
              color: #adabab;
              flex: 1;
            }
            .nameClass {
              font-size: 0.125rem;
              white-space: nowrap;
              /* 确保文本在一行内显示 */
              overflow: hidden;
              /* 隐藏超出容器的内容 */
              text-overflow: ellipsis;
              /* 使用省略符号表示被截断的文本 */
            }
          }
        }
      }
    }
  }
}
</style>